<template>
  <div class="gesture-navigation-layout">
    <!-- 手势指示器 -->
    <div class="gesture-indicators">
      <!-- 边缘滑动指示器 -->
      <div class="edge-indicator left" :class="{ active: edgeGesture.left }">
        <div class="indicator-content">
          <el-icon><ArrowLeft /></el-icon>
          <span>返回</span>
        </div>
      </div>
      <div class="edge-indicator right" :class="{ active: edgeGesture.right }">
        <div class="indicator-content">
          <span>菜单</span>
          <el-icon><ArrowRight /></el-icon>
        </div>
      </div>
      <div class="edge-indicator top" :class="{ active: edgeGesture.top }">
        <div class="indicator-content">
          <el-icon><ArrowUp /></el-icon>
          <span>首页</span>
        </div>
      </div>
      <div class="edge-indicator bottom" :class="{ active: edgeGesture.bottom }">
        <div class="indicator-content">
          <span>设置</span>
          <el-icon><ArrowDown /></el-icon>
        </div>
      </div>
    </div>

    <!-- 手势轨迹显示 -->
    <svg v-if="showGesturePath" class="gesture-path" :style="gesturePathStyle">
      <path
        :d="gesturePath"
        stroke="#409eff"
        stroke-width="3"
        fill="none"
        stroke-linecap="round"
        stroke-linejoin="round"
        opacity="0.8"
      />
    </svg>

    <!-- 手势菜单 -->
    <transition name="gesture-menu">
      <div v-if="showGestureMenu" class="gesture-menu" :style="gestureMenuStyle">
        <div class="menu-header">
          <h3>手势菜单</h3>
          <button class="close-btn" @click="closeGestureMenu">
            <el-icon><Close /></el-icon>
          </button>
        </div>
        <div class="menu-content">
          <div
            v-for="item in gestureMenuItems"
            :key="item.action"
            class="menu-item"
            @click="handleGestureAction(item.action)"
          >
            <div class="item-icon" :style="{ background: item.color }">
              <el-icon :size="20">
                <component :is="item.icon" />
              </el-icon>
            </div>
            <div class="item-info">
              <div class="item-title">{{ item.title }}</div>
              <div class="item-gesture">{{ item.gesture }}</div>
            </div>
          </div>
        </div>
      </div>
    </transition>

    <!-- 圆形手势菜单 -->
    <transition name="circle-menu">
      <div v-if="showCircleMenu" class="circle-menu" :style="circleMenuStyle">
        <div class="circle-center">
          <el-icon :size="32"><component :is="circleMenuIcon" /></el-icon>
        </div>
        <div
          v-for="(item, index) in circleMenuItems"
          :key="item.action"
          class="circle-item"
          :style="getCircleItemStyle(index)"
          @click="handleCircleAction(item.action)"
        >
          <div class="circle-icon" :style="{ background: item.color }">
            <el-icon :size="16">
              <component :is="item.icon" />
            </el-icon>
          </div>
          <span class="circle-label">{{ item.title }}</span>
        </div>
      </div>
    </transition>

    <!-- 手势提示 -->
    <transition name="gesture-hint">
      <div v-if="showGestureHint" class="gesture-hint">
        <div class="hint-content">
          <el-icon :size="24"><component :is="hintIcon" /></el-icon>
          <span>{{ gestureHintText }}</span>
        </div>
      </div>
    </transition>

    <!-- 主内容区 -->
    <main class="main-content" ref="mainContent">
      <!-- 导航栏 -->
      <div class="content-header">
        <div class="nav-breadcrumb">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item
              v-for="(item, index) in breadcrumbs"
              :key="index"
              :to="item.path"
            >
              {{ item.title }}
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="nav-actions">
          <button class="action-btn" @click="showGestureHelp">
            <el-icon><QuestionFilled /></el-icon>
          </button>
          <button class="action-btn" @click="toggleGestureMenu">
            <el-icon><Menu /></el-icon>
          </button>
        </div>
      </div>

      <!-- 页面内容 -->
      <div class="page-content">
        <router-view v-slot="{ Component }">
          <transition name="page-transition" mode="out-in">
            <component :is="Component" :key="$route.fullPath" />
          </transition>
        </router-view>
      </div>
    </main>

    <!-- 手势帮助模态框 -->
    <el-dialog
      v-model="showHelpDialog"
      title="手势操作指南"
      width="500px"
      :close-on-click-modal="false"
    >
      <div class="gesture-help">
        <div class="help-section">
          <h4>边缘手势</h4>
          <div class="help-items">
            <div class="help-item">
              <div class="help-gesture left-swipe"></div>
              <span>从左边缘向右滑动 - 返回上一页</span>
            </div>
            <div class="help-item">
              <div class="help-gesture right-swipe"></div>
              <span>从右边缘向左滑动 - 打开菜单</span>
            </div>
            <div class="help-item">
              <div class="help-gesture down-swipe"></div>
              <span>从上边缘向下滑动 - 返回首页</span>
            </div>
            <div class="help-item">
              <div class="help-gesture up-swipe"></div>
              <span>从下边缘向上滑动 - 打开设置</span>
            </div>
          </div>
        </div>

        <div class="help-section">
          <h4>圆形手势</h4>
          <div class="help-items">
            <div class="help-item">
              <div class="help-gesture circle-clockwise"></div>
              <span>顺时针画圆 - 刷新页面</span>
            </div>
            <div class="help-item">
              <div class="help-gesture circle-counter"></div>
              <span>逆时针画圆 - 打开快速操作</span>
            </div>
          </div>
        </div>

        <div class="help-section">
          <h4>多点触控</h4>
          <div class="help-items">
            <div class="help-item">
              <div class="help-gesture pinch"></div>
              <span>双指捏合 - 缩小视图</span>
            </div>
            <div class="help-item">
              <div class="help-gesture spread"></div>
              <span>双指展开 - 放大视图</span>
            </div>
            <div class="help-item">
              <div class="help-gesture rotate"></div>
              <span>双指旋转 - 旋转视图</span>
            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <el-button @click="showHelpDialog = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, markRaw } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  ArrowLeft, ArrowRight, ArrowUp, ArrowDown, Close, Menu, QuestionFilled,
  HomeFilled, ShoppingCart, Box, Money, UserFilled, DataBoard, Setting,
  Refresh, Search, Bell, Star, Share
} from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()
const mainContent = ref(null)

// 手势状态
const edgeGesture = ref({
  left: false,
  right: false,
  top: false,
  bottom: false
})

const showGesturePath = ref(false)
const gesturePath = ref('')
const gesturePathStyle = ref({})

const showGestureMenu = ref(false)
const gestureMenuStyle = ref({})

const showCircleMenu = ref(false)
const circleMenuStyle = ref({})
const circleMenuIcon = ref(markRaw(HomeFilled))

const showGestureHint = ref(false)
const gestureHintText = ref('')
const hintIcon = ref(markRaw(HomeFilled))

const showHelpDialog = ref(false)

// 手势数据
let touchStart = { x: 0, y: 0, time: 0 }
let touchMove = { x: 0, y: 0 }
let gestureStartTime = 0
let gesturePoints = []

// 手势菜单项
const gestureMenuItems = ref([
  {
    action: 'home',
    title: '返回首页',
    gesture: '向下滑动',
    icon: markRaw(HomeFilled),
    color: '#409eff'
  },
  {
    action: 'back',
    title: '返回上页',
    gesture: '向左滑动',
    icon: markRaw(ArrowLeft),
    color: '#67c23a'
  },
  {
    action: 'refresh',
    title: '刷新页面',
    gesture: '顺时针画圆',
    icon: markRaw(Refresh),
    color: '#e6a23c'
  },
  {
    action: 'search',
    title: '搜索功能',
    gesture: '向右滑动',
    icon: markRaw(Search),
    color: '#f56c6c'
  },
  {
    action: 'notifications',
    title: '通知中心',
    gesture: '向上滑动',
    icon: markRaw(Bell),
    color: '#909399'
  }
])

// 圆形菜单项
const circleMenuItems = ref([
  {
    action: 'dashboard',
    title: '首页',
    icon: markRaw(HomeFilled),
    color: '#409eff'
  },
  {
    action: 'sales',
    title: '销售',
    icon: markRaw(ShoppingCart),
    color: '#67c23a'
  },
  {
    action: 'inventory',
    title: '库存',
    icon: markRaw(Box),
    color: '#e6a23c'
  },
  {
    action: 'finance',
    title: '财务',
    icon: markRaw(Money),
    color: '#f56c6c'
  },
  {
    action: 'member',
    title: '会员',
    icon: markRaw(UserFilled),
    color: '#909399'
  },
  {
    action: 'reports',
    title: '报表',
    icon: markRaw(DataBoard),
    color: '#9c27b0'
  }
])

// 计算属性
const breadcrumbs = computed(() => {
  const matched = route.matched.filter(item => item.meta && item.meta.title)
  return matched.map(item => ({
    path: item.path,
    title: item.meta.title
  }))
})

// 方法
const handleTouchStart = (e) => {
  const touch = e.touches[0]
  touchStart = {
    x: touch.clientX,
    y: touch.clientY,
    time: Date.now()
  }
  gestureStartTime = Date.now()
  gesturePoints = [{ x: touch.clientX, y: touch.clientY }]
  
  // 检查边缘手势
  checkEdgeGesture(touch.clientX, touch.clientY)
}

const handleTouchMove = (e) => {
  const touch = e.touches[0]
  touchMove = {
    x: touch.clientX,
    y: touch.clientY
  }
  
  gesturePoints.push({ x: touch.clientX, y: touch.clientY })
  
  // 更新手势路径
  updateGesturePath()
  
  // 检查边缘手势状态
  checkEdgeGestureActive(touch.clientX, touch.clientY)
}

const handleTouchEnd = (e) => {
  const touch = e.changedTouches[0]
  const endTime = Date.now()
  const duration = endTime - gestureStartTime
  const distance = Math.sqrt(
    Math.pow(touch.clientX - touchStart.x, 2) + 
    Math.pow(touch.clientY - touchStart.y, 2)
  )
  
  // 执行手势识别
  recognizeGesture(touchStart, touchMove, duration, distance)
  
  // 重置状态
  resetGestureState()
}

const checkEdgeGesture = (x, y) => {
  const threshold = 50
  edgeGesture.value = {
    left: x < threshold,
    right: x > window.innerWidth - threshold,
    top: y < threshold,
    bottom: y > window.innerHeight - threshold
  }
}

const checkEdgeGestureActive = (x, y) => {
  const threshold = 100
  edgeGesture.value.left = edgeGesture.value.left && x < threshold
  edgeGesture.value.right = edgeGesture.value.right && x > window.innerWidth - threshold
  edgeGesture.value.top = edgeGesture.value.top && y < threshold
  edgeGesture.value.bottom = edgeGesture.value.bottom && y > window.innerHeight - threshold
}

const updateGesturePath = () => {
  if (gesturePoints.length < 2) return
  
  let path = `M ${gesturePoints[0].x} ${gesturePoints[0].y}`
  for (let i = 1; i < gesturePoints.length; i++) {
    path += ` L ${gesturePoints[i].x} ${gesturePoints[i].y}`
  }
  
  gesturePath.value = path
  showGesturePath.value = true
}

const recognizeGesture = (start, end, duration, distance) => {
  const minDistance = 50
  const maxDuration = 1000
  
  if (distance < minDistance || duration > maxDuration) return
  
  const deltaX = end.x - start.x
  const deltaY = end.y - start.y
  const absDeltaX = Math.abs(deltaX)
  const absDeltaY = Math.abs(deltaY)
  
  // 边缘手势识别
  if (edgeGesture.value.left && deltaX > minDistance) {
    handleBackGesture()
  } else if (edgeGesture.value.right && deltaX < -minDistance) {
    handleMenuGesture()
  } else if (edgeGesture.value.top && deltaY > minDistance) {
    handleHomeGesture()
  } else if (edgeGesture.value.bottom && deltaY < -minDistance) {
    handleSettingsGesture()
  }
  // 滑动手势识别
  else if (absDeltaX > absDeltaY && absDeltaX > minDistance) {
    if (deltaX > 0) {
      handleRightSwipe()
    } else {
      handleLeftSwipe()
    }
  } else if (absDeltaY > absDeltaX && absDeltaY > minDistance) {
    if (deltaY > 0) {
      handleDownSwipe()
    } else {
      handleUpSwipe()
    }
  }
  // 圆形手势识别
  else if (gesturePoints.length > 10) {
    const isCircular = checkCircularGesture()
    if (isCircular) {
      handleCircleGesture()
    }
  }
}

const checkCircularGesture = () => {
  if (gesturePoints.length < 10) return false
  
  const center = {
    x: gesturePoints.reduce((sum, p) => sum + p.x, 0) / gesturePoints.length,
    y: gesturePoints.reduce((sum, p) => sum + p.y, 0) / gesturePoints.length
  }
  
  const distances = gesturePoints.map(p => 
    Math.sqrt(Math.pow(p.x - center.x, 2) + Math.pow(p.y - center.y, 2))
  )
  
  const avgDistance = distances.reduce((sum, d) => sum + d, 0) / distances.length
  const variance = distances.reduce((sum, d) => sum + Math.pow(d - avgDistance, 2), 0) / distances.length
  
  return variance < avgDistance * 0.3
}

const handleBackGesture = () => {
  displayGestureHint('返回上页', markRaw(ArrowLeft))
  router.back()
}

const handleMenuGesture = () => {
  displayGestureHint('打开菜单', markRaw(Menu))
  toggleGestureMenu()
}

const handleHomeGesture = () => {
  displayGestureHint('返回首页', markRaw(HomeFilled))
  router.push('/dashboard')
}

const handleSettingsGesture = () => {
  displayGestureHint('打开设置', markRaw(Setting))
  router.push('/system/settings')
}

const handleRightSwipe = () => {
  displayGestureHint('向右滑动', markRaw(ArrowRight))
}

const handleLeftSwipe = () => {
  displayGestureHint('向左滑动', markRaw(ArrowLeft))
}

const handleDownSwipe = () => {
  displayGestureHint('向下滑动', markRaw(ArrowDown))
}

const handleUpSwipe = () => {
  displayGestureHint('向上滑动', markRaw(ArrowUp))
}

const handleCircleGesture = () => {
  displayGestureHint('圆形手势', markRaw(Refresh))
  showCircleMenu.value = true
  circleMenuStyle.value = {
    left: touchStart.x - 100 + 'px',
    top: touchStart.y - 100 + 'px'
  }
}

const displayGestureHint = (text, icon) => {
  gestureHintText.value = text
  hintIcon.value = icon
  showGestureHint.value = true
  
  setTimeout(() => {
    showGestureHint.value = false
  }, 2000)
}

const resetGestureState = () => {
  edgeGesture.value = { left: false, right: false, top: false, bottom: false }
  showGesturePath.value = false
  gesturePoints = []
}

const toggleGestureMenu = () => {
  showGestureMenu.value = !showGestureMenu.value
  if (showGestureMenu.value) {
    gestureMenuStyle.value = {
      left: '50%',
      top: '50%',
      transform: 'translate(-50%, -50%)'
    }
  }
}

const closeGestureMenu = () => {
  showGestureMenu.value = false
}

const handleGestureAction = (action) => {
  switch (action) {
    case 'home':
      router.push('/dashboard')
      break
    case 'back':
      router.back()
      break
    case 'refresh':
      window.location.reload()
      break
    case 'search':
      ElMessage.info('搜索功能')
      break
    case 'notifications':
      ElMessage.info('通知中心')
      break
  }
  closeGestureMenu()
}

const getCircleItemStyle = (index) => {
  const angle = (index * 360) / circleMenuItems.value.length
  const radius = 80
  const x = Math.cos(angle * Math.PI / 180) * radius
  const y = Math.sin(angle * Math.PI / 180) * radius
  
  return {
    left: (50 + x) + '%',
    top: (50 + y) + '%',
    transform: 'translate(-50%, -50%)'
  }
}

const handleCircleAction = (action) => {
  switch (action) {
    case 'dashboard':
      router.push('/dashboard')
      break
    case 'sales':
      router.push('/sales')
      break
    case 'inventory':
      router.push('/inventory')
      break
    case 'finance':
      router.push('/finance')
      break
    case 'member':
      router.push('/member')
      break
    case 'reports':
      router.push('/reports')
      break
  }
  showCircleMenu.value = false
}

const showGestureHelp = () => {
  showHelpDialog.value = true
}

// 生命周期
onMounted(() => {
  if (mainContent.value) {
    mainContent.value.addEventListener('touchstart', handleTouchStart, { passive: false })
    mainContent.value.addEventListener('touchmove', handleTouchMove, { passive: false })
    mainContent.value.addEventListener('touchend', handleTouchEnd, { passive: false })
  }
})

onUnmounted(() => {
  if (mainContent.value) {
    mainContent.value.removeEventListener('touchstart', handleTouchStart)
    mainContent.value.removeEventListener('touchmove', handleTouchMove)
    mainContent.value.removeEventListener('touchend', handleTouchEnd)
  }
})
</script>

<style scoped>
.gesture-navigation-layout {
  width: 100%;
  height: 100vh;
  position: relative;
  background: #f5f7fa;
  overflow: hidden;
}

/* 手势指示器 */
.gesture-indicators {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1000;
}

.edge-indicator {
  position: absolute;
  opacity: 0;
  transition: all 0.3s ease;
}

.edge-indicator.active {
  opacity: 1;
}

.edge-indicator.left {
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 100px;
}

.edge-indicator.right {
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 100px;
}

.edge-indicator.top {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 60px;
}

.edge-indicator.bottom {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 60px;
}

.indicator-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: rgba(64, 158, 255, 0.9);
  color: white;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
}

/* 手势轨迹 */
.gesture-path {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 999;
}

/* 手势菜单 */
.gesture-menu {
  position: fixed;
  width: 300px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  z-index: 2000;
  overflow: hidden;
}

.menu-header {
  height: 50px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  color: white;
}

.menu-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.close-btn {
  width: 24px;
  height: 24px;
  border: none;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-content {
  padding: 16px;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 8px;
}

.menu-item:hover {
  background: #f5f7fa;
}

.item-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  margin-right: 12px;
}

.item-info {
  flex: 1;
}

.item-title {
  font-size: 14px;
  font-weight: 500;
  color: #303133;
}

.item-gesture {
  font-size: 12px;
  color: #909399;
}

/* 圆形菜单 */
.circle-menu {
  position: fixed;
  width: 200px;
  height: 200px;
  z-index: 2000;
}

.circle-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
}

.circle-item {
  position: absolute;
  width: 50px;
  height: 50px;
  cursor: pointer;
  animation: circleAppear 0.3s ease forwards;
}

@keyframes circleAppear {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.circle-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  margin-bottom: 4px;
}

.circle-label {
  font-size: 10px;
  color: #606266;
  text-align: center;
  display: block;
}

/* 手势提示 */
.gesture-hint {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3000;
}

.hint-content {
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 12px 20px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  backdrop-filter: blur(10px);
}

/* 主内容区 */
.main-content {
  width: 100%;
  height: 100vh;
  overflow-y: auto;
}

.content-header {
  height: 60px;
  background: white;
  border-bottom: 1px solid #e4e7ed;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
}

.nav-breadcrumb {
  flex: 1;
}

.nav-actions {
  display: flex;
  gap: 8px;
}

.action-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: #f5f7fa;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #606266;
  transition: all 0.2s ease;
}

.action-btn:hover {
  background: #e4e7ed;
  color: #303133;
}

.page-content {
  padding: 24px;
}

/* 手势帮助 */
.gesture-help {
  padding: 16px 0;
}

.help-section {
  margin-bottom: 24px;
}

.help-section h4 {
  margin: 0 0 12px 0;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.help-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.help-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.help-gesture {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  font-size: 14px;
}

.left-swipe { background: #67c23a; }
.right-swipe { background: #409eff; }
.down-swipe { background: #e6a23c; }
.up-swipe { background: #f56c6c; }
.circle-clockwise { background: #909399; }
.circle-counter { background: #9c27b0; }
.pinch { background: #ff9800; }
.spread { background: #4caf50; }
.rotate { background: #2196f3; }

/* 动画 */
.gesture-menu-enter-active,
.gesture-menu-leave-active {
  transition: all 0.3s ease;
}

.gesture-menu-enter-from {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.9);
}

.gesture-menu-leave-to {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.9);
}

.circle-menu-enter-active,
.circle-menu-leave-active {
  transition: all 0.3s ease;
}

.circle-menu-enter-from {
  opacity: 0;
  transform: scale(0.8);
}

.circle-menu-leave-to {
  opacity: 0;
  transform: scale(0.8);
}

.gesture-hint-enter-active,
.gesture-hint-leave-active {
  transition: all 0.3s ease;
}

.gesture-hint-enter-from,
.gesture-hint-leave-to {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.9);
}

.page-transition-enter-active,
.page-transition-leave-active {
  transition: all 0.3s ease;
}

.page-transition-enter-from {
  opacity: 0;
  transform: translateX(20px);
}

.page-transition-leave-to {
  opacity: 0;
  transform: translateX(-20px);
}

/* 响应式 */
@media (max-width: 768px) {
  .gesture-menu {
    width: calc(100vw - 40px);
  }
  
  .help-items {
    gap: 8px;
  }
  
  .help-item {
    font-size: 14px;
  }
}
</style>
